(function () {

    var style = `
      .jwebui-tab {
        display: flex;
        flex-direction: column;
      }
      .jwebui-tab .tab-header {
          height: 30px;
          background: #fff;
          line-height: 30px;
          font-size: 12px;
          color: #8c8c8c;
          border-bottom: 1px solid #eaeaea;
      }
      .jwebui-tab .tab-body {
        flex: 1;
        overflow: auto;
      }
      .jwebui-tab .tab-header .tab{
          display:inline-block;
          padding: 0 5px;
          box-size: border;
          height: 30px;
          cursor: pointer;
      }
      .jwebui-tab .tab-header .tab.active {
          background: #fff;
          border-bottom: 1px solid #1baf84;
          color: #545454;
      }
      .jwebui-tab .page {
          display: none;
      }
      .jwebui-tab .page.active {
          display: unset;
      }
    
    `;
  
    var template = `
      <div class="jwebui-tab">
        <div class="tab-header">
          <div v-for="tab in tabs" class="tab" :class="'tab ' + (active == tab.key?'active':'')" @click="changeTabPage(tab.key)">
            <slot :name="'#'+tab.key">{{tab.title}}</slot>
          </div>
        </div>
        <div class="tab-body">
          <div v-for="tab in tabs" :class="'page ' + (active == tab.key?'active':'')" >
            <slot :name="tab.key">{{tab.key}}</slot>
          </div>
        </div>
      </div>
    `
  
    return {
      data() {
        return {
        }
      },
      updated: () => {
      },
      mounted: () => {
      },
      props: ['tabs', 'active'],
      computed: {
      },
      watch: {
      },
      methods: {
        changeTabPage: function(key){
          this.$emit("tabchange", key)
        }
      },
      template: template,
      style: style
    }
  })()